<template>
  <div class="lsc-find">
    <mt-header title="我的需求"></mt-header>
    
    <div ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
      <p v-if="!demandlist" class="page-infinite-loading">
        暂无数据！
      </p>
      <div v-infinite-scroll="loadIngMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">    
        <mt-cell 
          v-for="(item,index) in demandlist" 
          :key="index" 
          :title="item.demand" 
          :value="item.createtime"></mt-cell>
      </div>
    </div>
    
  </div>
</template>

<script>

import api from '../api';

export default {
  name: 'find',
  data () {
    return {
      wrapperHeight: 0,
      demandlist: {},
      demandtotal: 0,
      demand: {
        openid: localStorage.openId,
        pageindex: 1,
        pagesize: 15
      }
    }
  },
  created() {
    this.getMyServieDemandItems()
  },
  mounted() {
    this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
  },
  methods: {
    getMyServieDemandItems() {
      this.$indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      });
      this.axios.get(api.employer.MyServieDemandItems, {
        params: this.demand
      }).then(res=>{
          this.$indicator.close();
          
          this.demandtotal = res.data.pageinfo.total
          this.demandlist = res.data.data
        })
    },
    loadIngMore() {
      let demandLen = this.demandlist.length
      if(this.demandtotal > demandLen) {
         this.demand.pageindex =  this.demand.pageindex + 1
        this.loading = true;
        this.getMyServieDemandItems()
      }else {
        this.loading = false
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.lsc-find-button {
  width: 100%;
  position: fixed;
  bottom: 60px;
  text-align: center;
}
.lsc-find-button span {
  display: block;
  padding-top: 10px;
}
.lsc-find-button>span>label>a {
  color: #26a2ff;
  text-decoration: none;
}
.mint-popup-3 {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
/* .lsc-find-box {
  padding: 20px 0;
  background: #fff;
} */
.lsc-find-box>p {
  background: #848484;
  color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  line-height: 25px;
}
</style>
<style>
.lsc-find .mint-cell-value input {background: #fff;}
.lsc-find .mint-radiolist-title {margin:0}
</style>
